<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores';

const router = useRouter();
const userStore = useUserStore();

// 收货地址数据
const addresses = ref([
  {
    id: 1,
    name: '张三',
    phone: '13812345678',
    address: '北京市朝阳区建国路88号中央公园12号楼2单元501室',
    isDefault: true
  },
  {
    id: 2,
    name: '李四',
    phone: '13987654321',
    address: '上海市浦东新区陆家嘴环路1000号金融中心25楼',
    isDefault: false
  }
]);

// 商品清单数据
const orderItems = ref([
  {
    id: 1,
    name: '浪漫红玫瑰花束',
    spec: '11朵',
    package: '牛皮纸',
    price: 199,
    quantity: 1,
    image: 'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
  },
  {
    id: 2,
    name: '阳光向日葵花束',
    spec: '标准',
    package: '礼盒',
    price: 279,
    quantity: 1,
    image: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
  },
  {
    id: 3,
    name: '彩色郁金香花束',
    spec: '标准',
    package: '牛皮纸',
    price: 289,
    quantity: 1,
    image: 'https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
  }
]);

// 表单状态
const selectedAddressId = ref(1);
const selectedDeliveryMethod = ref('普通配送');
const selectedPaymentMethod = ref('微信支付');
const selectedDate = ref('今天');
const selectedTimeSlot = ref('9:00 - 12:00');
const messageContent = ref('');
const needInvoice = ref(false);

// 配送方式选项
const deliveryMethods = [
  { name: '普通配送', description: '预计 1-2 天送达', price: 15 },
  { name: '加急配送', description: '2小时内送达', price: 30 },
  { name: '定时配送', description: '指定时间段配送', price: 20 }
];

// 日期选项
const dateOptions = ['今天', '明天', '后天', '选择日期'];

// 时间段选项
const timeSlots = ['9:00 - 12:00', '12:00 - 15:00', '15:00 - 18:00', '18:00 - 21:00'];

// 快捷留言
const quickMessages = ['生日快乐', '永远爱你', '感谢有你', '祝福健康', '新婚快乐'];

// 计算总价
const subtotal = ref(767);
const deliveryFee = ref(15);
const totalAmount = ref(782);

// 组件挂载时初始化
onMounted(() => {
  userStore.initializeAuth();
});

// 方法
const selectAddress = (addressId: number) => {
  selectedAddressId.value = addressId;
};

const selectDeliveryMethod = (method: string) => {
  selectedDeliveryMethod.value = method;
  const selectedMethod = deliveryMethods.find(m => m.name === method);
  if (selectedMethod) {
    deliveryFee.value = selectedMethod.price;
    totalAmount.value = subtotal.value + deliveryFee.value;
  }
};

const selectPaymentMethod = (method: string) => {
  selectedPaymentMethod.value = method;
};

const selectDate = (date: string) => {
  selectedDate.value = date;
};

const selectTimeSlot = (slot: string) => {
  selectedTimeSlot.value = slot;
};

const addQuickMessage = (message: string) => {
  if (messageContent.value) {
    messageContent.value += ' ' + message;
  } else {
    messageContent.value = message;
  }
};

const submitOrder = () => {
  // 提交订单逻辑
  console.log('提交订单', {
    addressId: selectedAddressId.value,
    deliveryMethod: selectedDeliveryMethod.value,
    paymentMethod: selectedPaymentMethod.value,
    date: selectedDate.value,
    timeSlot: selectedTimeSlot.value,
    message: messageContent.value,
    needInvoice: needInvoice.value,
    totalAmount: totalAmount.value
  });
  
  // 跳转到订单详情页面
  router.push('/order-detail');
};

// 用户登出
const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};
</script>

<template>
  <div class="min-h-screen flex flex-col" style="background-color: #f8f8f8;">
    <!-- 导航栏 -->
    <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
      <div class="container mx-auto flex items-center justify-between">
        <a @click.prevent="router.push('/')" href="#" class="text-2xl font-bold text-rose-500 flex items-center">
          <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
          花礼相伴
        </a>
        <div class="hidden lg:block w-1/3">
          <div class="relative">
            <input type="text" placeholder="搜索鲜花、场景..." 
              class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
            <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          </div>
        </div>
        <nav class="hidden md:flex space-x-6">
          <a @click.prevent="router.push('/')" href="#" class="text-gray-600 hover:text-rose-500">首页</a>
          <a @click.prevent="router.push('/categories')" href="#" class="text-gray-600 hover:text-rose-500">分类</a>
          <a @click.prevent="router.push('/cart')" href="#" class="text-gray-600 hover:text-rose-500">购物车</a>
        </nav>
        <div class="flex items-center space-x-4">
          <a @click.prevent="router.push('/cart')" href="#" class="p-2 relative">
            <font-awesome-icon icon="shopping-cart" class="text-gray-600 text-xl" />
            <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
          </a>
          
          <!-- 未登录状态 -->
          <template v-if="!userStore.checkIsLoggedIn">
            <a @click.prevent="router.push('/login')" href="#" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
            <a @click.prevent="router.push('/register')" href="#" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
          </template>
          
          <!-- 已登录状态 -->
          <template v-else>
            <div class="hidden md:flex items-center space-x-3">
              <div class="flex items-center space-x-2">
                <img 
                  :src="userStore.getUserAvatar" 
                  :alt="userStore.getDisplayName"
                  class="w-8 h-8 rounded-full object-cover"
                >
                <span class="text-gray-700">{{ userStore.getDisplayName }}</span>
              </div>
              <div class="relative group">
                <button class="text-gray-600 hover:text-rose-500">
                  <font-awesome-icon icon="chevron-down" class="text-sm" />
                </button>
                <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                  <a @click.prevent="router.push('/user-center')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                  <a @click.prevent="router.push('/order-detail')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的订单</a>
                  <a @click.prevent="router.push('/favorites')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的收藏</a>
                  <div class="border-t border-gray-100"></div>
                  <a @click.prevent="handleLogout" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- 移动端搜索栏 -->
      <div class="mt-3 relative md:hidden">
        <input type="text" placeholder="搜索鲜花、场景..." 
          class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
        <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6 md:py-8">
      <h1 class="text-2xl font-bold mb-6 text-gray-800">订单结算</h1>

      <div class="md:flex md:gap-6">
        <!-- 左侧结算信息 -->
        <div class="md:w-2/3">
          <!-- 收货地址 -->
          <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-bold text-gray-800">收货地址</h2>
              <button class="text-rose-500 hover:text-rose-600 text-sm flex items-center">
                <font-awesome-icon icon="plus" class="mr-1" /> 添加新地址
              </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div 
                v-for="address in addresses" 
                :key="address.id"
                @click="selectAddress(address.id)"
                :class="[
                  'border rounded-lg p-4 relative cursor-pointer',
                  selectedAddressId === address.id 
                    ? 'border-2 border-rose-500' 
                    : 'border border-gray-200 hover:border-gray-300'
                ]"
              >
                <span 
                  v-if="address.isDefault"
                  class="absolute top-0 right-0 bg-rose-500 text-white text-xs px-2 py-1 rounded-bl-lg"
                >
                  默认
                </span>
                <div class="flex justify-between items-start mb-2">
                  <div>
                    <span class="font-medium text-gray-800">{{ address.name }}</span>
                    <span class="ml-4 text-gray-600">{{ address.phone }}</span>
                  </div>
                </div>
                <p class="text-gray-600 mb-2">{{ address.address }}</p>
                <div class="flex justify-end space-x-3 text-sm">
                  <button class="text-gray-500 hover:text-rose-500">
                    <font-awesome-icon icon="edit" class="mr-1" /> 编辑
                  </button>
                  <button class="text-gray-500 hover:text-rose-500">
                    <font-awesome-icon icon="trash" class="mr-1" /> 删除
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 商品清单 -->
          <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
            <h2 class="text-lg font-bold mb-4 text-gray-800">商品清单</h2>

            <div
              v-for="(item, index) in orderItems"
              :key="item.id"
              :class="[
                'pb-4 mb-4',
                index < orderItems.length - 1 ? 'border-b border-gray-100' : ''
              ]"
            >
              <div class="flex">
                <div class="w-16 h-16 md:w-20 md:h-20 flex-shrink-0 rounded overflow-hidden mr-4">
                  <img
                    :src="item.image"
                    :alt="item.name"
                    class="w-full h-full object-cover"
                  >
                </div>
                <div class="flex-grow">
                  <h3 class="font-medium text-gray-800">{{ item.name }}</h3>
                  <p class="text-sm text-gray-500 mt-1">规格：{{ item.spec }} | 包装：{{ item.package }}</p>
                  <div class="flex justify-between items-center mt-2">
                    <span class="text-rose-500 font-bold">¥{{ item.price }}</span>
                    <span class="text-gray-500">x{{ item.quantity }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 配送方式 -->
          <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
            <h2 class="text-lg font-bold mb-4 text-gray-800">配送方式</h2>

            <div class="space-y-3">
              <label
                v-for="method in deliveryMethods"
                :key="method.name"
                class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-gray-300"
              >
                <input
                  v-model="selectedDeliveryMethod"
                  :value="method.name"
                  type="radio"
                  name="delivery"
                  class="form-radio h-4 w-4 text-rose-500"
                  @change="selectDeliveryMethod(method.name)"
                >
                <span class="ml-2 flex-grow">
                  <span class="font-medium text-gray-800">{{ method.name }}</span>
                  <span class="text-gray-500 text-sm ml-2">{{ method.description }}</span>
                </span>
                <span class="text-rose-500 font-medium">¥{{ method.price }}</span>
              </label>
            </div>
          </div>

          <!-- 配送时间 -->
          <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
            <h2 class="text-lg font-bold mb-4 text-gray-800">配送时间</h2>

            <div class="space-y-3">
              <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                <button
                  v-for="date in dateOptions"
                  :key="date"
                  @click="selectDate(date)"
                  :class="[
                    'p-3 rounded-lg font-medium',
                    selectedDate === date
                      ? 'border-2 border-rose-500 text-rose-500'
                      : 'border border-gray-200 hover:border-gray-300 text-gray-700'
                  ]"
                >
                  {{ date }}
                </button>
              </div>

              <div class="mt-4">
                <h3 class="font-medium mb-2 text-gray-800">配送时段</h3>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                  <button
                    v-for="slot in timeSlots"
                    :key="slot"
                    @click="selectTimeSlot(slot)"
                    :class="[
                      'p-2 rounded-lg',
                      selectedTimeSlot === slot
                        ? 'border-2 border-rose-500 text-rose-500'
                        : 'border border-gray-200 hover:border-gray-300 text-gray-700'
                    ]"
                  >
                    {{ slot }}
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 留言卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
            <h2 class="text-lg font-bold mb-4 text-gray-800">留言卡片</h2>

            <div>
              <textarea
                v-model="messageContent"
                placeholder="填写贺卡留言内容..."
                rows="3"
                class="w-full border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent text-gray-800"
              ></textarea>

              <div class="mt-3 flex flex-wrap gap-2">
                <button
                  v-for="message in quickMessages"
                  :key="message"
                  @click="addQuickMessage(message)"
                  class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200"
                >
                  {{ message }}
                </button>
              </div>
            </div>
          </div>

          <!-- 发票信息 -->
          <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-bold text-gray-800">发票信息</h2>
              <label class="inline-flex items-center">
                <input
                  v-model="needInvoice"
                  type="checkbox"
                  class="form-checkbox h-4 w-4 text-rose-500"
                >
                <span class="ml-2 text-gray-700">需要发票</span>
              </label>
            </div>
          </div>
        </div>

        <!-- 右侧订单信息 -->
        <div class="md:w-1/3">
          <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 sticky top-6">
            <h2 class="text-lg font-bold mb-4 text-gray-800">订单信息</h2>

            <div class="space-y-3 mb-6">
              <div class="flex justify-between">
                <span class="text-gray-600">商品金额</span>
                <span class="text-gray-800">¥{{ subtotal.toFixed(2) }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">配送费</span>
                <span class="text-gray-800">¥{{ deliveryFee.toFixed(2) }}</span>
              </div>
            </div>

            <div class="border-t border-gray-200 pt-4 mb-6">
              <div class="flex justify-between items-center">
                <span class="text-gray-800 font-medium">实付金额</span>
                <span class="text-rose-500 text-xl font-bold">¥{{ totalAmount.toFixed(2) }}</span>
              </div>
            </div>

            <div class="space-y-4">
              <div>
                <h3 class="font-medium mb-2 text-gray-800">支付方式</h3>
                <div class="grid grid-cols-2 gap-3">
                  <label
                    :class="[
                      'flex items-center justify-center p-3 rounded-lg cursor-pointer',
                      selectedPaymentMethod === '微信支付'
                        ? 'border-2 border-rose-500'
                        : 'border border-gray-200 hover:border-gray-300'
                    ]"
                  >
                    <input
                      v-model="selectedPaymentMethod"
                      value="微信支付"
                      type="radio"
                      name="payment"
                      class="hidden"
                    >
                    <font-awesome-icon :icon="['fab', 'weixin']" class="text-xl text-green-500 mr-2" />
                    <span class="text-gray-800">微信支付</span>
                  </label>
                  <label
                    :class="[
                      'flex items-center justify-center p-3 rounded-lg cursor-pointer',
                      selectedPaymentMethod === '支付宝'
                        ? 'border-2 border-rose-500'
                        : 'border border-gray-200 hover:border-gray-300'
                    ]"
                  >
                    <input
                      v-model="selectedPaymentMethod"
                      value="支付宝"
                      type="radio"
                      name="payment"
                      class="hidden"
                    >
                    <font-awesome-icon icon="credit-card" class="text-xl text-blue-500 mr-2" />
                    <span class="text-gray-800">支付宝</span>
                  </label>
                </div>
              </div>

              <button
                @click="submitOrder"
                class="w-full bg-rose-500 text-white py-3 rounded-md hover:bg-rose-600 transition duration-300 font-medium"
              >
                提交订单
              </button>

              <p class="text-xs text-gray-500 text-center">
                提交订单即表示您同意<a href="#" class="text-rose-500">《用户购买协议》</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部导航栏 - 移动端 -->
    <footer class="md:hidden mt-auto bg-white border-t border-gray-200">
      <div class="flex justify-around py-2">
        <a @click.prevent="router.push('/')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="home" class="text-lg" />
          <span class="text-xs mt-1">首页</span>
        </a>
        <a @click.prevent="router.push('/categories')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="th-large" class="text-lg" />
          <span class="text-xs mt-1">分类</span>
        </a>
        <a @click.prevent="router.push('/cart')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="shopping-cart" class="text-lg" />
          <span class="text-xs mt-1">购物车</span>
        </a>
        <a @click.prevent="router.push('/user-center')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon :icon="['far', 'user']" class="text-lg" />
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </footer>

    <!-- 页脚 - PC端 -->
    <footer class="hidden md:block bg-white pt-8 pb-6 mt-8 border-t border-gray-200">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
          <div>
            <h3 class="font-bold text-gray-800 mb-4">关于我们</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">品牌故事</a></li>
              <li><a href="#" class="hover:text-rose-500">企业文化</a></li>
              <li><a href="#" class="hover:text-rose-500">门店展示</a></li>
              <li><a href="#" class="hover:text-rose-500">联系我们</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">购物指南</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">购物流程</a></li>
              <li><a href="#" class="hover:text-rose-500">支付方式</a></li>
              <li><a href="#" class="hover:text-rose-500">常见问题</a></li>
              <li><a href="#" class="hover:text-rose-500">售后服务</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">配送服务</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">配送范围</a></li>
              <li><a href="#" class="hover:text-rose-500">配送时间</a></li>
              <li><a href="#" class="hover:text-rose-500">配送费用</a></li>
              <li><a href="#" class="hover:text-rose-500">特殊配送服务</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">联系我们</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li class="flex items-center">
                <font-awesome-icon icon="phone" class="mr-2 text-rose-500" />
                400-800-8888
              </li>
              <li class="flex items-center">
                <font-awesome-icon icon="envelope" class="mr-2 text-rose-500" />
                service@flowercompany.com
              </li>
              <li class="flex items-center">
                <font-awesome-icon icon="map-marker-alt" class="mr-2 text-rose-500" />
                北京市朝阳区建国路88号
              </li>
            </ul>
            <div class="flex space-x-4 mt-4">
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon :icon="['fab', 'weixin']" />
              </a>
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon :icon="['fab', 'weibo']" />
              </a>
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon icon="envelope" />
              </a>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-200 pt-6 text-center text-sm text-gray-500">
          <p>© 2023 花礼相伴 版权所有 京ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
a {
  cursor: pointer;
}
</style>
